// 为了支持开关这种表单项的组件 https://done.alibaba-inc.com/share/file/9MJ1taeRCbcDrFAH?aid=A1133A96-CAFF-49FF-9C62-E2019E5F8698
import { Form } from '@teamix/ui';
import * as React from 'react';

import './index.scss';

interface IFormItemProps {
  title: React.ReactNode;
  description?: React.ReactNode;
  operation?: React.ReactNode;
  className?: string;
  verticalMode?: boolean;
}

const prefix = 'yunxiao-formitem-switch';

const FormItem: React.FC<IFormItemProps> = ({
  title,
  description,
  operation,
  className,
  verticalMode = false,
  ...others
}) => {
  return (
    <Form.Item
      className={`${prefix} ${verticalMode ? 'vertical-mode' : ''} ${className || ''}`}
      label={
        <div className={`${prefix}-label`}>
          <div>
            <div className={`${prefix}-title`}>{title}</div>
            {description && <div className={`${prefix}-description`}>{description}</div>}
          </div>
          {operation && <div className={`${prefix}-operation`}>{operation}</div>}
        </div>
      }
      {...others}
    />
  );
};

export default FormItem;
